<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>微笑的丁总的个人博客系统</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-lg-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">总数</span>
                        <h5>博客</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" th:text="${total}"></h1>
                        <div class="stat-percent font-bold text-success">100% <i class="fa fa-bolt"></i></div>
                        <small>博客总数</small>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-info pull-right">已发布</span>
                        <h5>博客</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" th:text="${published}">275,800</h1>
                        <div class="stat-percent font-bold text-info">20% <i class="fa fa-level-up"></i></div>
                        <small>已发布博客数量</small>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">草稿箱</span>
                        <h5>博客</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" th:text="${draft}">106,120</h1>
                        <div class="stat-percent font-bold text-navy">44% <i class="fa fa-level-up"></i></div>
                        <small>草稿箱博客数量</small>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-danger pull-right">垃圾箱</span>
                        <h5>博客 </h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" th:text="${garbage}">80,600</h1>
                        <div class="stat-percent font-bold text-danger">38% <i class="fa fa-level-down"></i></div>
                        <small>垃圾箱博客数量</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4">
                <div class="ibox-title">
                    <h5>最新动态</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <ul>
                        <li th:each="item:${logMessages}" style="margin-bottom:10px ;list-style-type: none">
                            <span class="badge badge-info" th:text="${item.dateStr}"></span>
                            <span th:text="${item.message}"></span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-8">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>系统状态仪表盘</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div id="echarts_gauge_percent" style="width: 100%;height: 300px"></div>
                    </div>
                </div>
            </div>

        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>访客统计</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-lg-9">
                                <div class="">
                                    <div id="echarts_line_visitor" style="width: 100%;height: 450px"></div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <ul class="stat-list">
                                    <li>
                                        <div class=" ">
                                            <div class="ibox-title">
                                                <span class="label label-warning-light pull-right">在线</span>
                                                <h5>访客</h5>
                                            </div>
                                            <div class="ibox-content">
                                                <h1 class="no-margins" th:text="${onlineCount}"></h1>
                                                <div class="stat-percent font-bold text-success">100% <i
                                                        class="fa fa-bolt"></i></div>
                                                <small>当前在线访客数</small>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class=" ">
                                            <div class="ibox-title">
                                                <span class="label label-success pull-right">今日</span>
                                                <h5>访客</h5>
                                            </div>
                                            <div class="ibox-content">
                                                <h1 class="no-margins" th:text="${todayCount}"></h1>
                                                <div class="stat-percent font-bold text-success">100% <i
                                                        class="fa fa-bolt"></i></div>
                                                <small>今日访客数量</small>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class=" ">
                                            <div class="ibox-title">
                                                <span class="label label-primary pull-right">历史</span>
                                                <h5>访客</h5>
                                            </div>
                                            <div class="ibox-content">
                                                <h1 class="no-margins" th:text="${totalCount}"></h1>
                                                <div class="stat-percent font-bold text-success">100% <i
                                                        class="fa fa-bolt"></i></div>
                                                <small>历史访客数量</small>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script src="/static/ajax/libs/echarts/echarts.min.js" th:src="@{/ajax/libs/echarts/echarts.min.js}"></script>
<script>
    $(function () {

        //初始化系统信息仪表盘
        initEchartsGauge();
        //初始化访客统计
        initEchartsLine();
        //填充数据到仪表盘
        fixDataGauge();
        // setInterval(fixDataGauge, 15000);
        //填充数据到折线图
        fixDataLine();

        window.onresize = function () {
            echarts_pie_spider_type.resize();
            echarts_gauge_percent.resize();
            echarts_line_visitor.resize();
        };
    });

    let echarts_pie_spider_type;
    let echarts_gauge_percent;
    let echarts_line_visitor;

    function fixDataLine() {
        $.ajax({
            url: "/dashboard/visitCount/list",
            type: "get",
            success: function (result) {
                echarts_line_visitor.hideLoading();
                if (result.code == 0) {
                    console.log(result.data);
                    var xAxiss = new Array();
                    $.each(result.data, function (index, obj) {
                        xAxiss[index] = obj.date;
                    });
                    echarts_line_visitor.setOption({
                        xAxis: {
                            data: xAxiss
                        },
                        series: [
                            {
                                data: result.data
                            }
                        ]
                    });
                }
            }
        });
    }

    function initEchartsLine() {
        echarts_line_visitor = echarts.init(document.getElementById('echarts_line_visitor'));
        option = {
            grid: {
                x: 45,
                y: 45,
                x2: 45,
                y2: 45,
            },
            title: {
                text: '近七日访问量',
                left: 'center',
                subtext: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['近七日访问量']
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {
                        readOnly: false
                    },
                    magicType: {
                        type: ['line', 'bar']
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value',
            },
            series: [{
                name: '当日访问量',
                type: 'line',
                data: [],
                markPoint: {
                    data: [{
                        type: 'max',
                        name: '最大值'
                    },
                        {
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }]
                }
            }]
        };
        echarts_line_visitor.showLoading();
        echarts_line_visitor.setOption(option);
    }


    function fixDataGauge() {
        $.ajax({
            url: "/dashboard/memJvmCpuData/list",
            type: "get",
            success: function (result) {
                console.log(result)
                if (result.code == 0) {
                    echarts_gauge_percent.hideLoading();
                    var option = echarts_gauge_percent.getOption();
                    //mem
                    option.series[0].data[0].value = result.data[0];
                    //cpu
                    option.series[1].data[0].value = result.data[1];
                    //jvm
                    option.series[2].data[0].value = result.data[2];
                    echarts_gauge_percent.setOption(option, true);
                }
            }
        })

    }

    function initEchartsGauge() {
        echarts_gauge_percent = echarts.init(document.getElementById('echarts_gauge_percent'));

        option = {

            backgroundColor: 'rgba(255,255,255,0)',
            tooltip: {
                formatter: "{a} <br/>{c} {b}"
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            grid: {
                top: "1px",
                left: "1px",
                right: "1px",
                bottom: "1px",
                backgroundColor: '#fff',
                width: "auto", //图例宽度
                height: "100%", //图例高度
            },
            series: [
                {
                    name: '内存使用率',
                    type: 'gauge',
                    z: 3,
                    min: 0,
                    max: 100,
                    splitNumber: 10,
                    radius: '100%',
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            width: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 15,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 20,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            color: 'auto'
                        }
                    },
                    title: {
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            fontSize: 20,
                            fontStyle: 'italic'
                        }
                    },
                    detail: {
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder'
                        }
                    },
                    data: [{value: 40, name: '内存使用率（%）'}]
                },
                {
                    name: 'CPU使用率',
                    type: 'gauge',
                    center: ['22%', '55%'],    // 默认全局居中
                    radius: '85%',
                    min: 0,
                    max: 100,
                    endAngle: 45,
                    splitNumber: 10,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            width: 8
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 12,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 20,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            color: 'auto'
                        }
                    },
                    pointer: {
                        width: 5
                    },
                    title: {
                        offsetCenter: [0, '-30%'],       // x, y，单位px
                    },
                    detail: {
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder'
                        }
                    },
                    data: [{value: 50, name: 'CPU使用率（%）'}]
                },
                {
                    name: 'JVM使用率',
                    type: 'gauge',
                    center: ['79%', '55%'],    // 默认全局居中
                    radius: '85%',
                    min: 0,
                    max: 100,
                    startAngle: 140,
                    endAngle: -45,
                    splitNumber: 10,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            width: 8
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 12,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 20,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            color: 'auto'
                        }
                    },
                    pointer: {
                        width: 5
                    },
                    title: {
                        offsetCenter: [0, '-30%'],       // x, y，单位px
                    },
                    detail: {
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder'
                        }
                    },
                    data: [{value: 50, name: 'JVM使用率（%）'}]
                }
            ]
        };
        echarts_gauge_percent.showLoading();
        echarts_gauge_percent.setOption(option);

    }
</script>
</body>
</html>
